<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // vue 用的就是观察者模式 当数据发生变化时通知视图更新 

        class Observed { // 被观察者
            constructor() {
                this.state = undefined
                this.followerArr = []
            }

            link(follower) {
                this.followerArr.push(follower)
            }

            notice() {
                this.followerArr.forEach(follower => {
                    follower.receive(this.state)
                })
            }

            setState(status) {
                this.state = status
                this.notice()
            }
        }

        class Observer { // 观察者
            constructor(name) {
                this.name = name
            }

            receive(status) {
                console.log(this.name + '接收到了:' + status)
            }
        }

        var girl = new Observed()
        var a = new Observer('男朋友')
        var b = new Observer('男闺蜜')

        girl.link(a)
        girl.link(b)

        girl.setState('女朋友不开心')

    </script>
</body>

</html>